<template>
  <div class="container">
    <div class="head"></div>
    <div class="main">
      <div class="left">
        <VueDraggable v-model="components" animation="150" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="clone" class="rounded">
          <div v-for="item in components" :key="item.id" class="conf-item">
            {{ item.conf.tagName }}
          </div>
        </VueDraggable>
      </div>
      <div class="middle" @click="choose" id="form">
        <a-form-model
          :label-align="conf.labelAlign"
          :layout="conf.layout"
          :colon="conf.colon"
          :rules="conf.rules"
          :label-col="conf.labelCol"
          :wrapper-col="conf.wrapperCol"
          @click="choose"
        >
          <form-designer parent-id="root" :item="conf.items" class="drag-full" :data="data"></form-designer>
          <a-button @click="showData">展示数据</a-button>
        </a-form-model>
      </div>
      <div class="right">
        <a-form-model v-model="conf" layout="inline">
          <a-row>
            <div v-if="this.currentChooseId === 'form'">
              <a-col>
                <a-form-model-item label="标签对齐方式">
                  <a-radio-group v-model="conf.labelAlign">
                    <a-radio-button value="left">左对齐</a-radio-button>
                    <a-radio-button value="right">右对齐</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="标签位置">
                  <a-radio-group v-model="conf.layout">
                    <a-radio-button value="inline">左边</a-radio-button>
                    <a-radio-button value="horizontal">顶部</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否显示冒号">
                  <a-radio-group v-model="conf.colon">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </div>
            <div v-else>
              <a-col>
                <a-form-model-item label="标题名称">
                  <a-input v-model="currentChooseData.tagName"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="字段">
                  <a-input v-model="currentChooseData.field"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="宽度">
                  <a-input-number v-model="currentChooseData.width"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否默认获取焦点">
                  <a-radio-group v-model="currentChooseData.autoFocus">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="提示文字">
                  <a-input v-model="currentChooseData.placeholder"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="默认值">
                  <a-input v-model="currentChooseData.defaultValue"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否禁止编辑">
                  <a-radio-group v-model="currentChooseData.disabled">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="最大输入长度">
                  <a-input-number v-model="currentChooseData.maxLength"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否允许清空">
                  <a-radio-group v-model="currentChooseData.allowClear">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="最小值">
                  <a-input-number v-model="currentChooseData.min"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="最大值">
                  <a-input-number v-model="currentChooseData.max"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否隐藏">
                  <a-radio-group v-model="currentChooseData.visibility">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否只读">
                  <a-radio-group v-model="currentChooseData.readonly">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="是否必填">
                  <a-radio-group v-model="currentChooseData.required">
                    <a-radio-button :value="true">是</a-radio-button>
                    <a-radio-button :value="false">否</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </div>
          </a-row>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
  import { VueDraggable } from 'vue-draggable-plus';
  import { INPUT_COMPONENTS } from '@/views/designer/index';
  import store from '../../store/index';
  export default {
    name: 'designer',
    components: {
      VueDraggable,
    },
    data() {
      return {
        components: INPUT_COMPONENTS, //源组件
        currentConfig: {}, //选中的组件配置内容
        data: {},
        conf: {
          tagName: '',
          field: '',
          labelAlign: 'right',
          layout: 'horizontal',
          colon: true,
          rules: {},
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
          items: [], //编辑中的数据
        },
      };
    },
    computed: {
      draggableData() {
        return store.getters['draggable/data'];
      },
      currentChooseId() {
        return store.getters['choose/currentChooseId'];
      },
      currentChooseData() {
        return store.getters['choose/currentChooseData'];
      },
      deletedChooseId() {
        return store.getters['choose/deletedChooseId'];
      },
    },
    watch: {
      draggableData: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          if (nval) {
            const data = JSON.parse(store.getters['draggable/data']);
            console.log(JSON.stringify(data));
            const root = data.root;
            delete data.root;
            for (const key in data) {
              this.setRootData(key, data[key], root);
            }
            this.conf.items = root;
          } else {
            this.conf.items = [];
          }
          this.$forceUpdate();
        },
      },
      // currentChooseId: {
      //   deep: true, // 深度监听
      //   immediate: true, //立即执行
      //   handler(nval) {
      //     //递归实现
      //     for (const item of this.conf.items) {
      //       this.setCurrentConfig(item, nval);
      //     }
      //   },
      // },
      deletedChooseId: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          this.deletedChoose(this.conf.items, nval, false);
        },
      },
      currentChooseData: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          for (const item of this.conf.items) {
            if (item.id === nval.id) {
              item.conf = nval;
              break;
            }
          }
        },
      },
    },

    methods: {
      showData() {
        console.log(JSON.stringify(this.conf.items));
      },
      setRootData(key, data, arr) {
        for (const item of arr) {
          if (item.id === key) {
            if (item.tag === 'd-collapse') {
              item.subItem.children = data;
            } else {
              item.children = data;
            }
            break;
          } else {
            if (item.subItems && item.subItems.length > 0) {
              this.setRootData(key, data, item.subItems);
            } else if (item.subItem && item.subItem.children && item.subItem.children.length > 0) {
              this.setRootData(key, data, item.subItem.children);
            }
          }
        }
      },

      deletedChoose(arr, val, flag) {
        if (flag) {
          return true;
        }
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == val) {
            this.$delete(arr, i);
            return true;
          }
          if (arr[i].subItem && arr[i].subItem.children && arr[i].subItem.children.length > 0) {
            return this.deletedChoose(arr[i].subItem.children, val, false);
          } else if (arr[i].subItems && arr[i].subItems.length > 0) {
            for (const subItem of arr[i].subItems) {
              if (subItem.children && subItem.children.length > 0) {
                return this.deletedChoose(subItem.children, val, false);
              }
            }
          }
        }
        return false;
      },

      clone(val) {
        const cloneObj = JSON.parse(JSON.stringify(val));
        cloneObj.id = '_' + new Date().getTime();
        if (cloneObj.subItems && cloneObj.subItems.length > 0) {
          for (let index = 0; index < cloneObj.subItems.length; index++) {
            cloneObj.subItems[index]['id'] = '_subItem' + index + new Date().getTime();
          }
        }
        return cloneObj;
      },
      choose(e) {
        const currentChooseId = e.target.id && e.target.id !== '' ? e.target.id : this.getFirstParentId(e.target.parentElement);
        //把当前选中组件提交到vuex
        store.commit('choose/currentChooseId', currentChooseId);
      },
      getFirstParentId(el) {
        if (!el) {
          return 'el null';
        }
        return el.id && el.id !== '' ? el.id : this.getFirstParentId(el.parentElement);
      },
    },
  };
</script>

<style scoped>
  .container {
    width: 100%;
  }
  .head {
    width: 100%;
    height: 60px;
  }
  .main {
    width: 100%;
    display: flex;
    background-color: #f7f7f7;
    padding: 10px;
  }
  .left,
  .middle,
  .right {
    box-sizing: border-box;
    height: calc(100vh - 80px);
    background-color: #ffffff;
    padding: 10px;
    overflow: auto;
  }
  .left {
    width: 220px;
  }
  .middle {
    margin: 0 10px;
    width: calc(100% - 540px);
  }
  .right {
    width: 300px;
  }
  .conf-item {
    display: inline-block;
    width: 80px;
    background-color: #84a18a;
    margin: 5px;
    padding: 5px 10px;
    font-size: 14px;
  }
  .chosen {
    background-color: #000 !important;
    color: #fff;
  }
  .ghost {
    background-color: red !important;
  }
  .drag-full {
    height: calc(100vh - 100px);
    width: 100%;
    /*border: 1px solid #bbbbc4;*/
  }
</style>
